i<template>
    <div>
        <a-modal
            :visible="handleModalVisible"
            :title="form.id?'编辑':'添加'"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="80%"
            :dialog-style="{ margin: '0 auto'}"
            wrapClassName=""
            @cancel="closeVisible"
            >
            <template slot="footer" style="text-align:center;">
                <a-button key="back" @click="closeVisible">
                    取消
                </a-button>
                <a-button key="submit" type="primary" @click="onSubmit">
                    提交
                </a-button>
            </template>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                layout="inline" class="internaiControl-nodal-form"
            >
                <a-form-model-item label="一级分类" prop="fxmdl">
                    <a-select v-model="form.fxmdl" style="width:100%" @change="dlChange">
                        <a-select-option v-for="(item,indexD) in dlList" :key="indexD" :value="item.id">
                            {{item.fxmdlmc}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="二级分类" prop="fxmxl">
                    <a-select v-model="form.fxmxl" style="width:100%">
                        <a-select-option v-for="(item,indexX) in xlList" :key="indexX" :value="item.fxmxlmc">
                            {{item.fxmxlmc}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="天数">
                    <a-input-number v-if="dayNum" :min="0" :max="dayNum" v-model="form.fts" style="width:100%"/>
                    <a-input-number v-else :min="0" v-model="form.fts" style="width:100%"/>
                </a-form-model-item>
                <a-form-model-item label="金额" prop="fje">
                    <a-input-number :min="1" v-model="form.fje" style="width:100%"/>
                </a-form-model-item>
                <a-form-model-item label="项目说明" prop="fxmsm">
                    <a-input v-model="form.fxmsm"/>
                </a-form-model-item>
                <a-form-model-item label="申请人姓名" prop="fsqrxm">
                    <a-input v-model="form.fsqrxm" @click="checkMan('fsqrxm',form.fsqrxm,form.fsqrid)"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <personnelList ref="personnelListRef" :modaObj="modaObj" :radioCheck="true" @checkPersonnel="checkPersonnel"></personnelList>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import {} from '@/components/compSearchCriteria/ContractType'
import { mxAdd,mxEdit,selectdllist,selectxllist} from './service/index'
import personnelList from '../../../../administrativeOffice-new/modal/personnelList.vue'
import store from '@/store'
import moment from 'moment'
export default {
    props:{
        mxObj:{
            type:[Array,Object],
            default: () => {},
            required:false
        },
        dayNum: {
            type:Number,
            default: null,
            required:false
        }
    },
    components:{
        compSelector,personnelList
    },
    data() {
        return {
        moment:moment,
        fuserid: store.getters.userInfo.id,
        handleModalVisible: false,
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        form: {
            id: '',
            fxmdl: '',
            fxmxl: '',
            fts: 0,
            fje: null,
            fsqrxm: store.getters.userInfo.realname,
            fsqrid: store.getters.userInfo.id,
        },
        kongForm: {},
        rules: {
            fxmdl: [{ required: true, message: '请选择一级分类', trigger: 'change' }],
            fxmxl: [{ required: true, message: '请选择二级分类', trigger: 'change' }],
            fts: [{ required: true, message: '请输入天数', trigger: 'blur' }],
            fje: [{ required: true, message: '请输入金额', trigger: 'blur' }],
            fxmsm: [{ required: true, message: '请输入项目说明', trigger: 'blur' }],
            fsqrxm: [{ required: true, message: '请选择申请人', trigger: 'blur' }],
        },
        dlList: [],
        xlList: [],
        modaObj: {},
        }
    },
    created() {
        this.kongForm = JSON.parse(JSON.stringify(this.form))
        this.getselectdllist()
    },
    watch: {
        mxObj(newval,oldVal){
        //console.log(newval)
        if(newval.id){
            this.form = newval
        }
        },
    },
    methods: {
        // 右上角关闭后的回调
        closeVisible(e){
        this.handleModalVisible = false
        this.form = {...this.kongForm}
        },
        getselectdllist(){
            this.dlList = []
            selectdllist().then(res => {
                this.dlList = res.result
            })
            //console.log(this.dlList)
        },
        dlChange(val){
            let obj = this.dlList.find((i)=>{
                return i.id === val;//筛选出匹配数据
            });
            this.form.fxmdl = obj.fxmdlmc
            this.form.fxmxl = ''
            this.xlList = []
            selectxllist({dlid:val}).then(res => {
                //console.log(res)
                this.xlList = res.result
            })
        },
        checkMan(place,man,id){
            this.$nextTick(_ => {
                this.modaObj = {place: place,oldId:[id]}
                this.$refs.personnelListRef.personnelListVisible = true
            })
        },
        // 选择人员
        checkPersonnel(place,id,name){
            this.$refs.personnelListRef.personnelListVisible = false
            const data = this.form
            data['fsqrxm'] = name.toString()
            data['fsqrid'] = id.toString()
        },
        onSubmit() {
        this.$refs.ruleForm.validate(valid => {
            if (valid) {
                let data = this.form
                if(this.form.id){
                    this.$emit('editFormItem',data)
                } else {
                    this.$emit('addFormItem',data)
                }
                this.closeVisible()
            } else {
            //console.log('error submit!!');
            return false;
            }
        });
        },
    },
}
</script>
<style lang="less" scoped>
.form-model-addAndEdit{
    .ant-form-item {
        .ant-form-item-label{
            width: 180px !important;
        }
        .ant-form-item-control-wrapper{
            width: 180px !important;
            .ant-form-item-control {}
        }
    }
    .formModel-item-input {
        width: 100%;
    }
}
</style>
